wallpaper_enginefandomcom-20200222-history
Tutorial Scripting Custom Greeting Message
This guide will show you how to create a custom greeting text in your wallpaper which will change depending on the time of day and contain the name of the user of your wallpaper using SceneScript. Creating the user property "Name" In order for custom user input to be possible, a new user property needs to be created. Since we will directly reference it in the code, it's important that the property is called "Name". You can create a user property in the editor by going to the "Edit" option in the upper left and then "Change project settings". Click on "Add Property" and create a new property with the following settings: * Type: Text * Title: Name * Key: Will be automatically generated to be "name" * Default Value: A default name to be shown, we'll use "YOURNAME" but you can also set a default name if it makes sense for you. Users will now be able to set a custom name when they select the wallpaper in Wallpaper Engine, see the image on the right for reference. Creating the SceneScript logic In the next step we will add the logic to the wallpaper. Add a new Text Layer to the wallpaper by clicking on "Add Asset" on the left and then select "Text Layer" from the list. The default text will just be "Text Layer" but since we'll dynamically change it, we can leave it as it is. Next the the "Text" property of the text layer, click on the cogwheel icon and select "Bind Script". This will open up the SceneScript editor. You can replace the sample code in there with the following code block and change it to your liking: 'use strict'; let morningGreetings = [ 'Good morning,\n$!', 'Hi $,\ndid you sleep well?', 'Rise and shine, $.' ]; let middayGreetings = [ 'Good day, $.', 'Hi $,\nhow is it going?' ]; let afternoonGreetings = [ 'Good afternoon, $.', 'Hi $,\nhow is your day going?' ]; let eveningGreetings = [ 'Good evening, $.', 'Have a nice evening, $!', 'Hi $,\nhow has your day been?' ]; let nightGreetings = [ 'Late night session, $?', '$, it\'s getting late ��!' ]; /** * @param {String} value (for property 'text') */ var lastString; var lastTimeTag; var stringIndex = 0; export function update() { let hour = new Date().getHours(); let timeTag = hour < 5 ? 'night' : hour < 10 ? 'morning' : hour < 14 ? 'day' : hour < 18 ? 'afternoon' : hour < 23 ? 'evening' : 'night'; console.log(hour, timeTag); var stringList; switch (timeTag) { case 'morning': stringList = morningGreetings; break; case 'day': stringList = middayGreetings; break; case 'afternoon': stringList = afternoonGreetings; break; case 'evening': stringList = eveningGreetings; break; case 'night': stringList = nightGreetings; break; } if (lastTimeTag != timeTag) { lastTimeTag = timeTag; stringIndex = Math.floor(Math.random() * stringList.length); } let newString = stringListstringIndex; if (newString != lastString) { lastString = newString; thisLayer.text = newString.replace('$', engine.userProperties.name); } } /** * @param {Object} userProperties */ export function applyUserProperties() { lastString = ; } You can see that the script first defines a couple of JavaScript arrays which contain a list of possible sentences for each given time of day. We have created ''morningGreetings, middayGreetings, afternoonGreetings, eveningGreetings and nightGreetings. You can change each sentence to your liking and add more sentences. Let's have a look at one example string: Hi $,\ndid you sleep well? This string contains two things, first it has a dollar sign $'' in it. This dollar sign will be converted to the content of the user property we have created earlier, you can see this in the following line of code: ''thisLayer.text = newString.replace('$', engine.userProperties.name); Additionally, the \n is converted into a line break. This means the string will look like this if the name is left at the default: Hi, YOURNAME did you sleep well? The code also decides which of the different string arrays to take depending on the current hour of the day. The chosen string of each array is taken randomly, but the times of the day are defined in this row of the code: let timeTag = hour < 5 ? 'night' : hour < 10 ? 'morning' : hour < 14 ? 'day' : hour < 18 ? 'afternoon' : hour < 23 ? 'evening' : 'night'; Before 5 am, the nightGreetings are chosen, before 10 am, the morningGreetings are chosen and so on, you can change this to your liking or remove this check altogether and only use one array, if that suits you better. Category:SceneScript Category:Tutorials